<template>
    <el-container v-show="drawer" class="drawer">
        <!-- v-if="range !== 'codeforces'" -->
        <div class="content">
            <div>
                <div class="content-input-label">输入</div>
                <el-input size="default" class="content-input" v-model="testIn" type="textarea"
                    :autosize="{ minRows: 1 }" maxlength="10000" show-word-limit>
                </el-input>
            </div>
            <div>
                <div class="content-input-label-box">
                    <div class="content-input-label">输出</div>
                    <div class="content-input-label-time">
                        耗时：{{ pops.ouput.stderr ? 'err' : (pops.ouput.t || 0) + 'ms' }}
                    </div>
                </div>
                <!-- <pre class="content-input content-input-pre">{{ testOut }}</pre> -->
                <!-- <el-input size="default" class="content-input" v-model="testOut" type="textarea"
                    style="white-space: pre-wrap;" :autosize="{ minRows: 1 }" disabled>
                </el-input> -->
                <!-- 原始 textarea -->
                <pre class="testOut-pre">
                     <textarea class="testOut-pre-content" disabled rows="1" wrap="off" v-model="testOut"></textarea>
                 </pre>
            </div>
        </div>
        <!-- v-if="range !== 'codeforces'" -->
        <div class="footer">
            <div>
                <el-button size="default" v-for="(v, i) in exampleTest" type="primary" plain class="case-in-btn"
                    @click="caseIn(i)">
                    填充样例 {{ i + 1 }}
                </el-button>
            </div>
            <div>
                <el-button size="default" class="case-test-btn" type="primary" :loading="loading" @click="runcode()">
                    <el-icon v-show="!loading">
                        <CaretRight />
                    </el-icon>
                    &nbsp;&nbsp;运行测试
                </el-button>
            </div>
        </div>
        <!-- <codeforcesVue ref="codeforcesref" v-if="range === 'codeforces'"></codeforcesVue> -->
    </el-container>
</template>

<script setup lang="ts">
import { CaretRight } from '@element-plus/icons-vue';
import { ElInput } from 'element-plus';
import { computed, ref, useAttrs } from 'vue';
import Studycodemodel from '../../../mysql_interface/studycodemodel';
const testCaseLimit = 2
const emits = defineEmits<{ (e: 'update:textarea', value: string): void }>()

const pops = defineProps<{ ouput: Studycodemodel.Iuserquestioninfo, drawer: boolean, runcode: Function, loading: boolean, range?: string, question: Studycodemodel.Iquestion }>()

// 
const exampleTest = computed(() => {
    return pops.question?.exampletest?.slice(0, testCaseLimit) || []
})
// 
// const testIn = ref("")
// watch(() => pops.question, () => {
//     testIn.value=""
// });

const testOut = computed({
    get() {
        return pops.ouput.stdout ? pops.ouput.stdout : pops.ouput.stderr
        // `输出: ${pops.ouput.stdout} 
        // 时间:${pops.ouput.t}ms
        // 错误:${pops.ouput.stderr} `
    },
    set() {
    }
})

// 输入测试用例 
function caseIn(i: number) {
    // testIn.value = exampleTest.value[i].input || ""
    // emits('update:textarea', testIn.value)
    emits('update:textarea', exampleTest.value[i].input || "")
    // testOut.value = exampleTest.value[i].output
}

const attrs = useAttrs()
const testIn = computed<string>({
    get() {
        return attrs.textarea as string
    },
    set(v) {
        emits('update:textarea', v)
    }
})

const activeName2 = ref<'first' | 'second'>('first')
defineExpose({
    activeName2
})

</script>

<style scoped>
.drawer {
    bottom: 0px;
    width: 100%;
    background-color: var(--container-bg-color);
    /* height: calc(30% - var(--container-margin)); */
    /* min-height: calc(30% - var(--container-margin)); */
    /* height: auto; */
    /* margin-top: var(--container-margin); */
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    position: relative;

    border-radius: var(--container-border-radius);
    box-shadow: var(--container-box-shadow);

    --content-input-label: 21px;
    --margin-top10: 10px;
}

.content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex: auto;

    div {
        width: 100%;
        padding: 0 4px;
    }
}

.content-input-label-box {
    display: flex;
}

.content-input-label-time {
    color: #c0c4cc;
}

.content-input-label {
    height: var(--content-input-label)
}

.content-input,
.testOut-pre {
    margin-top: 10px;
    width: 100%;
    height: calc(100% - var(--content-input-label) - var(--margin-top10));
    /* min-height: 52px; */
    white-space: break-spaces;
    resize: none;
}

.testOut-pre {
    display: flex;
    overflow-y: hidden;
    box-sizing: border-box;
}

.testOut-pre-content {
    min-width: 100%;
    height: 100% !important;
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
    font-family: monospace;
    font-size: 14px;
    display: inline-block;

    resize: none;
    overflow: auto;
    /* white-space: pre-wrap; */
    word-wrap: break-word;
}

.footer {
    width: 100%;
    /* height: 30%; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    margin-top: var(--margin-top10);
}

.case-in-btn {
    width: 100px;
    height: 36px;
    border-radius: 4px;
    border: 1px solid rgba(70, 131, 250, 1);
    background-color: rgba(255, 255, 255, 1);
}

.case-test-btn {
    width: 100px;
    height: 36px;
    border-radius: 4px;
    background-color: rgba(70, 131, 250, 1);
}
</style>
<style>
#app.ojSass .drawer .el-input__wrapper {
    display: inline;
}

#app.ojSass .content-input .el-textarea__inner {
    height: 100% !important;
    resize: none;
}

/* 代码预览滚动条的宽度 */
#app.ojSass .drawer .testOut-pre-content::-webkit-scrollbar {
    width: 5px;
    /* y轴滚动条宽度 */
    height: 5px;
    /* x轴滚动条宽度 */
}

/* 滚动条的滑块 */
#app.ojSass .drawer .testOut-pre-content::-webkit-scrollbar-thumb {
    cursor: pointer;
    background-color: #0003;
    border-radius: 10px;
    transition: all .2s ease-in-out;
}

/* 滚动条轨道内阴影+圆角 */
#app.ojSass .drawer .testOut-pre-content::-webkit-scrollbar-track {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
}
</style>
